/*
  学习目标：props的基本使用
  步骤：
     1. props是什么: 所有的标签属性组成的一个对象。
     2. 作用: 传递数据
     3. 如何获取props: 
      3.1  函数式组件中, 通过形参获取props对象
      3.2  class组件: 通过this.props获取props对象
    👍 解构props
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        App
        <Child name="zs" age={18}></Child>
        <Footer gender="男" hobby="爬山"></Footer>
      </div>
    );
  }
}

// props是一个对象
// class组件: 通过this.props获取props对象
class Footer extends React.Component {
  render() {
    // 👍 解构props: cp
    const { gender, hobby } = this.props;
    return (
      <div>
        Footer - {gender} - {hobby}
      </div>
    );
  }
}

// props是一个对象
// 函数式组件中, 通过形参获取props对象
// 👍 解构props
function Child({ name, age }) {
  return (
    <h1>
      Child - {name} - {age}
    </h1>
  );
}
